<template>
  <div class="container">
    <div class="left">
      <div style="height: 50px; line-height: 50px; padding: 0 20px;">
        <label>监控设备列表</label>
      </div>
      <div class="camera-list">
        <el-input v-model="filterCameraText" placeholder="请输入设备名称" :suffix-icon="Search" style="width: 238px; margin-bottom: 18px; " @input="queryCamera" />

        <el-checkbox-group id="camera-checkbox-group" ref="cameraCheckboxGroup" v-model="checkedCameraIdList" >
          <el-tree-v2
            ref="cameraTreeRef"
            v-loading="cameraTreeLoading"
            style="width: 100%; height: 100%"
            :height="treeHeight"
            :data="cameraTreeData"
            node-key="nodeId" 
            :props="{ value: 'nodeId', label: 'nodeName', children: 'children' }"
            :filter-method="filterCamera"
          >
            <template #default="{ node, data }">
              <template v-if="data.equipmentCameraGroupId">
                <svg-icon icon-class="camera-circle" style="font-size: 18px; position: relative; right: 7px;;" />
                <span style="display: inline-block; width: calc(100% - 90px); height: 26px; line-height: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" >
                  {{ data.nodeName }} 
                </span>
              </template>
              <el-checkbox v-else :value="data.nodeId" :disabled="data.deviceStatus=='OFFLINE'" @change="(flag)=> { cameraCheckChange(data.nodeId, flag) }"> 
                <span v-if="data.deviceStatus=='OFFLINE'" style="color: rgb(200 90 90);">（离线）</span> 
                <span>{{ node.label }}</span>
              </el-checkbox>
            </template>
          </el-tree-v2>
        </el-checkbox-group>
      </div>
    </div>
    <div id="right" class="right">
      <video id="videoElement" style="width: 600px; height: 400px; border: 1px solid #ccc;"></video>
    </div>
  </div>
</template>

<script setup  lang="ts">
import request from '@/utils/request';
import { Calendar, Search } from '@element-plus/icons-vue'
import type { TreeNodeData } from 'element-plus/es/components/tree-v2/src/types'

import flvjs from 'flv-h265.js';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const filterCameraText = ref();
const leftDomHeight = ref();
const cameraTreeRef = ref<any>()
const cameraTreeLoading = ref(false)
const treeHeight = ref(0)

/**
     * 查询摄像头信息列表
     * */
const cameraTreeData = ref([]);
const cameraCheckboxGroup = ref();
const getCameraTreeList = async () => {
  cameraTreeLoading.value = true
  let cameraTreeRes = await request({
    url: '/equipment/equipment-camera-group/tree',
    method: 'get'
  }).finally(() => { cameraTreeLoading.value = false })

  console.log('获取摄像机：', cameraTreeRes)

  cameraTreeData.value = cameraTreeRes.data;

  //  展开所有节点
  nextTick(()=> {
    cameraTreeRef.value.setExpandedKeys(cameraTreeData.value.map(item=> { return item.nodeId }));
  })
}

/**
     * 过滤摄像头
     */
const queryCamera = (query: string) => {
      cameraTreeRef.value!.filter(query)
}

/**
     * 过滤摄像头
     */
const filterCamera = (query: string, data: TreeNodeData) => {
  return data.nodeName!.includes(query)
}

/**
     * 摄像机复选框点击
     */
const checkedCameraIdList = ref([]);
let videoUrl = ref<any>()
const cameraCheckChange = (cameraId: any, flag: any) => {
  console.log('点击的摄像机：', cameraId, flag)

  proxy.$modal.loading('加载中')
  request({
    url: '/equipment/equipment-info/get-video-url/' + cameraId,
    method: 'get',
    params: { playType: 0, playProtocol: 0 }
  }).then((videoRes)=> {
    console.log('获取视频地址：', videoRes)
    if (videoRes.data && videoRes.data.media_url) {
      videoUrl.value = JSON.parse(videoRes.data.media_url).wan;
      // videoUrl.value = 'https://flv-ngb-live.hd.sohu.com/live/tv_355071320_1735865861923.flv'
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        console.log('video元素：', videoElement);
        console.log('flv地址：', videoUrl.value);

        var flvPlayer = flvjs.createPlayer({
          type: 'flv',
          // type: 'mp4',
          // isLive: true,
          url: videoUrl.value
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      }
    }
  }).finally(()=> { proxy.$modal.closeLoading() })
}

onMounted(async () => {
  //  获取左侧元素高度
  const leftElement = document.getElementById('right');
  leftDomHeight.value = leftElement.clientHeight

  // 设置树高度
  const cameraCheckboxGroupElement = document.getElementById('camera-checkbox-group');
  treeHeight.value = cameraCheckboxGroupElement.clientHeight

  //  获取摄像机
  await getCameraTreeList();
});

</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.video_player {
  position: relative;
  width: 1000px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
}

.video_player video {
  width: 100%;
  height: 100%;
}

.video_player .menu {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
}

.video_player .menu .play {
  position: absolute;
  width: 50px;
  height: 30px;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  text-align: center;
  line-height: 30px;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  cursor: pointer;
}
.video_player .menu .screenshot {
  position: absolute; /* 确保定位是相对于父级的 .menu */
  width: 80px;
  height: 30px;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  text-align: center;
  line-height: 30px;
  top: 50%; /* 垂直居中 */
  left: 200px; /* 调整到合适的水平位置，可以根据需求修改 */
  transform: translateY(-50%); /* 垂直居中修正 */
  cursor: pointer;
}
.video_player .menu .screenshot:hover{
  background-color: rgb(219, 74, 74);
}

.video_player .menu .play:hover {
  background-color: rgb(219, 74, 74);
}

.time {
  position: absolute;
  width: 100px;
  height: 30px;
  color: white;
  text-align: center;
  line-height: 30px;
  top: 50%;
  left: 100px;
  transform: translateY(-50%);
}

/* 进度条 */
.progress_bar {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #ccc;
  transition: height .2s linear, top .2s linear;
}

.progress_bar>div {
  width: 0px;
  height: 100%;
  background-color: rgb(250, 139, 12);
}

.progress_bar>i {
  position: absolute;
  top: -2px;
  left: 0px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 20px;
  transition: height .2s linear, top .2s linear, width .2s linear;
}

/* 倍数 */
li {
  list-style: none;
}

.speed {
  position: absolute;
  top: 50%;
  right: 150px;
  transform: translateY(-50%);
  color: white;
  text-align: center;
  line-height: 30px;
}

.speed-options {
  position: absolute;
  top: -200px;  /* 根据需求调整位置 */
  left: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  width: 80px;
  z-index: 10;  /* 确保显示在其他内容之上 */
  display: block;
}

.speed-options li {
  padding: 5px;
  cursor: pointer;
  color: white;
}

.speed-options li:hover {
  background-color: rgb(219, 74, 74);
}

.speed div {
  width: 50px;
  height: 30px;
  border: 1px solid white;
  border-radius: 10px;
  cursor: pointer;
}
.speed div:hover {
  background-color: rgb(219, 74, 74);
}

/* 音量 */
.volume {
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  color: white;
  text-align: center;
  line-height: 30px;
}

.volume > span {
  display: block;
  width: 50px;
  height: 30px;
  border: 1px solid white;
  border-radius: 10px;
  cursor: pointer;
}

.volume > span:hover {
  background-color: rgb(219, 74, 74);
}

.Controller {
  position: absolute;
  top: -170px;
  width: 50px; /* 控制器的整体宽度 */
  height: 150px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex; /* 启用弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: flex-end; /* 垂直底部对齐 */
}

.volume-bar {
  position: relative;
  width: 6px;
  height: 90%;
  background-color: rgba(255, 255, 255, 0.3); /* 背景色提升对比度 */
  border-radius: 5px;
  margin-bottom: 10%; /* 下空当 */
}

.volume-fill {
  position: absolute;
  width: 100%;
  background-color: rgb(250, 139, 12);
  bottom: 0;
  border-radius: 5px; /* 圆角效果 */
}

.volume-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  transform: translateX(-50%);
  left: 50%;
}
/* 全屏 */
.full {
  position: absolute;
  width: 50px;
  height: 30px;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  text-align: center;
  line-height: 30px;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}
.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  text-align: center;
}

.input-container label {
  margin-bottom: 10px;
}

.input-container input {
  margin-bottom: 10px;
  padding: 8px;
  width: 300px;
  box-sizing: border-box;
}

.input-container button {
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 5px;
  background-color: #007BFF;
  color: white;
  border: none;
}

.input-container button:hover {
  background-color: #0056b3;
}

:deep(.el-card__header) {
  height: 60px;
}
:deep(.el-card__body) {
  height: calc(100% - 60px);
}
:deep(.pagination-container) {
  margin-top: 0;
}
:deep(.camera-scene-tabs .el-tabs__nav-scroll) {
  display: flex;
  justify-content: center;
}
:deep(.camera-scene-tabs > .el-tabs__content) {
  padding: 32px;
}
.container {
  display: flex;
  flex-direction: row !important;
  position: relative;
}
.left {
  height: 100%;
  width: 260px;
  position: absolute;
  left: 0;
  border: 1px solid #DCDFE6;
}
.right {
  height: 100%;
  width: calc(100% - 270px);
  border: 1px solid #DCDFE6;
  position: absolute;
  right: 0;
}
.camera-list {
  height: calc(100% - 50px);
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}
.camera-control {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #0b0a0a;
}
.camera-layout-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.vue-grid-layout {
  height: calc(100% - 50px) !important;
  background: #ffffff;
  .vue-grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
    border: 1px solid #ccc;
  }
}

.vue-grid-item:not(.vue-grid-placeholder) {
  background: #eeecec;
  border: 1px solid #ccc;
}

.vue-grid-item .resizing {
  opacity: 0.9;
}

.vue-grid-item .static {
  background: #cce;
}
.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}
.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}
.vue-grid-item .minMax {
  font-size: 12px;
}
.vue-grid-item .add {
  cursor: pointer;
}
.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}
:deep(.el-tree-node__expand-icon) {
  left: 200px;
  font-size: 14px;
  color: #3c3c3c;
  transform: rotate(180deg);
}
:deep(.el-tree-node__expand-icon.expanded) {
  transform: rotate(90deg);
}
:deep(#camera-checkbox-group) {
  flex: 1;
}
:deep(#camera-checkbox-group .el-checkbox__inner) {
  border-radius: 50%;
}
</style>
